<script setup lang="ts">
const tooltipDisable = ref(false)
const prop = defineProps({
  tooltipContent: {
    type: String,
    default: ''
  },
  type: {
    type: String as () => 'default' | 'primary' | 'warning' | 'danger' | 'info' | 'success',
    default: 'primary'
  },
  disable: {
    type: Boolean,
    default: false
  },
  plane: {
    type: Boolean,
    default: true,
  },
  circle: {
    type:Boolean,
    default: true,
  },
})

const click = defineEmits(['click'])

watch(() => prop.tooltipContent, (newVal) => {
  tooltipDisable.value = newVal === ''
})

</script>

<template>
  <el-tooltip :content="tooltipContent" effect="dark" :disabled="tooltipContent === ''">
    <el-button :circle="circle" :disabled="disable" :type="type" :plain="plane" @click="$emit('click')">
      <slot></slot>
    </el-button>

  </el-tooltip>

</template>

<style scoped lang="scss">
.icon-button-normal {
  border-radius: 10%;
}

.icon-button-light {
  background-color: #F5F7FA;
}

.el-button {
  padding: 8px 9px;
}

</style>